<template>
  <div class="login-container">
    <div class="logo" />
    <div class="form">
      <el-card shadow="never" class="login-card">
        <el-form ref="form" class="form-control" :model="loginForm" :rules="loginRules">
          <p class="title">登录</p>
          <div class="input-field">
            <el-form-item prop="mobile">
              <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
            </el-form-item>
          </div>
          <div class="ribbon">
            <div class="left">
              <el-form-item prop="isAgree">
                <el-checkbox v-model="loginForm.isAgree">
                  用户平台使用协议
                </el-checkbox>
              </el-form-item>
            </div>
          </div>
          <button class="submit-btn" @click="login">登录</button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { Message } from 'element-ui'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        isAgree: process.env.NODE_ENV === 'development'
      },
      isShow: false,
      loginRules: {
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '密码长度应该为6-16位之间',
          trigger: 'blur'
        }],
        // required只能检查 null "" undefined
        isAgree: [{
          validator: (rule, value, callback) => {
            // rule规则
            // value检查的数据 true/false
            // callback 函数 执行这个函数
            // 成功执行callback 失败也执行callback(错误对象 new Error(错误信息))
            value ? callback() : callback(new Error('没有勾选用户平台协议'))
          }
        }]
      }
    }
  },
  methods: {
    login() {
      this.$refs.form.validate(async(isOk) => {
        if (isOk) {
          // alert('校验通过')
          await this.$store.dispatch('user/login', this.loginForm)
          // vueX 中的action返回的是promise
          // 跳转到主页
          this.$router.push('/')
          Message({ type: 'success', message: '登录成功' })
        } else {
          alert('校验失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form-control {
  margin: 20px;
  background-color: #ffffff;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  width: 450px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 25px;
  border-radius: 8px;

  .ribbon {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    font-size: 20px;
    justify-content: space-between;
    transition: all 0.3s ease;

    .left {
      .el-checkbox {
        display: block;
        color: #000000;
        font-weight: 600;
        font-size: 20px;
        text-decoration: none;
      }

      label {
        &:hover {
          color: #2d79f3;
        }
      }

      input {
        scale: 1.5;
        margin-right: 8px;
      }
    }
  }
}

.title {
  font-size: 28px;
  font-weight: 800;
}

.input-field {
  position: relative;
  width: 100%;

  :focus {
    border: 1.5px solid #2d79f3;
  }

  .input {
    margin-top: 15px;
    width: 90%;
    outline: none;
    border-radius: 8px;
    height: 45px;
    //border: 1.5px solid #ecedec;
    background: transparent;
    //padding-left: 10px;
  }

  .password {
    position: relative;

    .eye {
      position: absolute;
      top: 0;
      right: 2%;
      transform: translateY(10%);
      width: 30px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }

  .label {
    position: absolute;
    top: 18px;
    left: 15px;
    color: #ccc;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 2;
  }

  :focus ~ .label,
  :valid ~ .label {
    top: -10px;
    left: 5px;
    font-size: 15px;
    color: #2d79f3;
    background-color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
  }
}

.submit-btn {
  margin-top: 30px;
  height: 55px;
  background: #f2f2f2;
  border-radius: 11px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(180deg, #363636 0%, #1b1b1b 50%, #000000 100%);
  box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;

  &:hover {
    box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a;
  }
}

.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;

  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png) no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    transform: translateX(-10%);
    padding: 0 100px;

    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
  }

  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;

    .el-card {
      border: none;
      padding: 0;
    }
  }
}

</style>
